<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加规格的页面</title>
</head>
<body>
	<form class="form-inline">
		<div class="container">
			<div class="row">
				<!-- 规格名称 -->
				<div class="col-md-5">


					<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only">Password</label> 
						<input type="text" class="form-control" name="specName" id="inputPassword2" placeholder="规格名称">
					<button type="button"  class="btn btn-primary" onclick="addLine()">添加一行</button>
					</div>

				</div>
				<!-- 规格选项 -->
				<div id="lineadd" class="col-md-7">
					<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only">Password</label> 
						<input type="text" name="optionList[0].optionName" class="form-control" id="inputPassword2" placeholder="选项">
						<input type="number" name="optionList[0].orders" class="form-control" id="inputPassword2" placeholder="排序">
					<button type="button"  class="btn btn-danger" onclick="delLine(this)">删除一行</button>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-2">
					<button type="button"  class="btn btn-success" onclick="add()">添加</button>
				</div>
			</div>
			
		</div>
	</form>
</body>

<script type="text/javascript">

	//添加
	function add(){
		var formData = $("form").serialize();
		$.post("/spec/add",formData,function(resp){
			if(resp){
				alert("success");
				$("#workArea").load("/spec/list")
			}else{
				alert("error!!")
			}
		})
	}
	

	var i = 1;
	function addLine(){
		$("#lineadd").append(`
				<div class="form-group mx-sm-3 mb-2">
				<label for="inputPassword2" class="sr-only">Password</label> 
				<input type="text" name="optionList[`+i+`].optionName" class="form-control" id="inputPassword2" placeholder="选项">
				<input type="number" name="optionList[`+i+`].orders" class="form-control" id="inputPassword2" placeholder="排序">
			<button type="button"  class="btn btn-danger" onclick="delLine(this)">删除一行</button>
			</div>
				`);

		i++;
	}

	function delLine(obj){
		$(obj).parent().remove();
		
	}
</script>
</html>